<template>
	<div class="page">
		<u-navbar :height="44">
			<view class="slot-wrap">
				<u-search placeholder="商品编号" v-model="searchForm.id" @search="load" @custom="load"></u-search>
			</view>
		</u-navbar>

		<div class="drop-list" :style="{paddingTop:statusBarHeight + 'px' }">
			<div class="drop-list-tab">
				<u-tabs :list="list" active-color="#333" :is-scroll="false" :current="current" @change="changeTabs">
				</u-tabs>
			</div>
			<div class="drop-list-config" @click="handleClickScreen">
				<div>
					筛选
				</div>
			</div>
		</div>
		<!-- 商品列表 -->
		<div class="global-list" v-if="goodsListData.length != 0">
			<div class="global-item" @click="handleClickGoods(item)" v-for="(item,index) in goodsListData" :key="index">
				<!-- 订单来源，订单号，订单状态 -->
				<div class="flex global-top-col">
					<div class="global-sn">{{item.sn}}</div>
					<div class="global-orderStatus">
						{{item.authFlag =='TOBEAUDITED' ?'待审核' : item.authFlag == 'PASS' ? '通过' : '审核拒绝' }}
					</div>
				</div>
				<!-- 商品信息 -->
				<div class="flex goods-item">
					<div style="margin-right:10rpx ;">
						<u-switch active-color="#333" size="40" v-if="selected" v-model="item.__selected"></u-switch>
					</div>
					<div>
						<u-image width="150" height="150" :src="item.thumbnail" mode="" />
					</div>
					<div class="wes-2 goods-name">{{item.goodsName}}</div>
					<!-- 价格 -->
					<div class="flex goods-right-col">
						<div class="goods-price" :style="{color:item.marketEnable== 'DOWN' ? '#ff6262' : ''}">
							{{item.marketEnable== 'DOWN' ? '下架中' : '上架中'}}
						</div>
						<div class="goods-price"></div>
					</div>
				</div>

				<div class="global-bottom-col flex">
					<div class="global-createTime">{{item.createTime}}</div>

					<div class="global-clientType">
						{{item.goodsType =='PHYSICAL_GOODS' ?'实物商品' : item.goodsType == 'VIRTUAL_GOODS' ? '虚拟商品' : '电子卡券' }}
					</div>
				</div>
				<div class="goods-follow-price">
					<div>
						商品价格：<span> ￥{{item.price | unitPrice}}</span>
					</div>
					<div>
						库存：<span> {{item.quantity }}</span>
					</div>
				</div>

			</div>
			<div class="select-btn" @click='confirm' v-if='selected'>
				确认/选择
			</div>
		</div>
		<u-empty text="暂无更多商品" v-else mode="order"></u-empty>
		<popup marketEnable ref="popup" @callback="screened" />
	</div>
</template>

<script>
	import popup from "@/components/m-popup/index";
	import storage from "@/utils/storage.js"; //缓存
	import {
		goodsGoodsList
	} from "@/api/goods";
	let systemInfo = uni.getSystemInfoSync();
	export default {
		components: {
			popup,
		},
		data() {
			return {
				statusBarHeight: systemInfo.statusBarHeight,
				checked: true,
				current: 0,
				list: [{
						name: "实物商品",
					},
					{
						name: "虚拟商品",
					},
				],
				searchForm: {
					// 搜索框初始化对象
					pageNumber: 1, // 当前页数
					pageSize: 10, // 页面大小
					sort: "create_time", // 默认排序字段
					order: "desc", // 默认排序方式
					id: "", //商品编号
					goodsType: "PHYSICAL_GOODS",
				},

				params: {},
				goodsListData: [], //商品列表
				selected: false, // 是否是选择模式 选择模式将回掉商品给父级
				selectedGoods: "", // 子级给父级传的商品
				routerVal: '', // src内容

			};
		},

		onLoad(options) {
			// 选择模式将筛选 上架以及审核通过的产品
			if (options.selected) {
				this.selected = true
				this.searchForm.marketEnable = 'UPPER'
				this.searchForm.authFlag = 'PASS'
				this.routerVal = options
				this.selectedGoods = options.ids
			} else {
				this.selected = false
			}
		},


		onShow() {
			this.load()
		},
		watch: {
			current(val) {
				this.goodsListData = [];
				this.init();
			},
		},
		//   触底
		onReachBottom() {
			this.searchForm.pageNumber++;
			this.init();
		},
		methods: {
			// 选择商品回调
			confirm() {
				let goods = this.goodsListData.filter(item => {
					return item.__selected
				})
				uni.$emit('selectedGoods', goods);
				uni.navigateBack()
			},

			// 筛选完成回调
			screened(val) {
				val.marketEnable ? (this.searchForm.marketEnable = val.marketEnable) : this.searchForm.marketEnable=null;
			
				this.load();
			},
			// 点击tab
			changeTabs(index) {
				this.current = index;
			},
			// 点击筛选
			handleClickScreen() {
				this.$refs.popup.open();
			},
			load() {
				this.searchForm.pageNumber = 1;
				this.goodsListData = [];
				this.init();
			},
			async init() {
				this.current == 0 ?
					(this.searchForm.goodsType = "PHYSICAL_GOODS") :
					(this.searchForm.goodsType = "VIRTUAL_GOODS");
				if(!this.searchForm.marketEnable) delete this.searchForm.marketEnable
				let res = await goodsGoodsList(this.searchForm);
				if (res.data.success) {
					const data = res.data.result.records
					if (this.routerVal.selected && this.selectedGoods) {
						console.log(this.selectedGoods)
						this.selectedGoods.split(',').forEach(id => {
							data.forEach(item => {
								if (item.id == id) {
									item.__selected = true
								}
							})
						})
					}
					this.goodsListData.push(...data);
				}
			},

			// 点击商品
			handleClickGoods(item) {
				uni.navigateTo({
					url: `/pages/goods/goodsOperation?id=${item.id}&&goodsType=${this.current}`
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/components/global.scss";

	@media screen and(min-width:750rpx) {
		/deep/ .u-navbar-inner {
			height: 100rpx !important;
		}

		/deep/ .u-navbar-placeholder {
			height: 100rpx !important;
		}
	}

	.goods-follow-price {
		>div {
			margin: 5rpx 0;

			>span {
				font-weight: bold;
				color: $main-color;
				font-size: 30rpx;
			}
		}
	}

	.select-btn {
		width: 300rpx;
		height: 75rpx;
		background: #333;
		position: fixed;
		left: 50%;
		margin-left: -150rpx;
		bottom: 40rpx;
		color: #fff;
		text-align: center;
		line-height: 75rpx;
		border-radius: 30rpx;

	}
</style>
